<template>
	<view class="page">
		<!-- 聊天 -->
		<com-chat ref="Chat" :roomId="roomId" :encryptDisplay="false" :showFriendName="true"
			:navbarHeight="statusBarHeight+44" :currentUser="quickGroupUserInfo">
			<template slot="navbar">
				<u-navbar bgColor="#fff" fixed placeholder>
					<!-- 导航栏左侧插槽 -->
					<view slot="left" class="navbar-left">
						<view class="navbar-left__back" @tap="navbarLeftClick">
							<u-icon name="arrow-left" color="#1D2129" size="32"></u-icon>
						</view>
						<view class="navbar-left__user" @tap="moreHandle">
							<text class="navbar-left__user-title textHide-span">{{chatTitle}}</text>
							<u-icon :name="moreShow?'arrow-down':'arrow-up'" size="36rpx" color="#86909C"></u-icon>
						</view>
					</view>
				</u-navbar>
			</template>
		</com-chat>

		<!-- 更多操作弹窗 -->
		<quick-group-more ref="More" :list="actionList" @itemClick="moreItemClick"
			@close="moreShow=false"></quick-group-more>

		<!-- 删除群组成员/删除小组成员 -->
		<quick-group-remove-member ref="RemoveMember" :showRemove="openId===ownerOpenId"></quick-group-remove-member>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import QuickGroupMore from '../components/quick-group-more/quick-group-more.vue'
	import QuickGroupRemoveMember from '../components/quick-group-remove-member/quick-group-remove-member.vue'

	export default {
		components: { QuickGroupMore, QuickGroupRemoveMember },
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				groupId: '',
				roomId: '',
				chatTitle: '',
				ownerOpenId: '',

				moreShow: false,
				actionList: [{
						name: '查看相册',
						value: 'picture',
						show: true,
					},
					{
						name: '群内人员',
						value: 'member',
						show: true,
					}
				],
			};
		},
		computed: {
			...mapGetters(['quickGroupUserInfo', 'openId']),
		},
		onLoad(option) {
			// console.log(option);
			this.groupId = option.groupId
			this.roomId = option.roomId
			this.chatTitle = option.chatTitle
			this.ownerOpenId = option.ownerOpenId
		},
		methods: {
			// 点击导航栏左侧
			navbarLeftClick() {
				let pages = getCurrentPages(); // 获取当前页面栈
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.redirectTo({
						url: '/pages/card/card'
					})
				}
			},
			moreHandle() {
				this.moreShow = true
				this.$refs.More.show()
			},
			moreItemClick({ value, index }) {
				switch (value) {
					case 'picture':
						uni.navigateTo({
							url: `/pagesCard/quickGroupPhoto/quickGroupPhoto?groupId=${this.groupId}`
						})
						break;
					case 'member':
						this.$refs.RemoveMember.show({
							title: '管理成员',
							groupId: this.groupId,
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
	}

	.navbar-left {
		display: flex;
		align-items: center;

		.navbar-left__back {}

		.navbar-left__user {
			margin-left: 20rpx;

			display: flex;
			align-items: center;

			.navbar-left__user-title {
				max-width: 360rpx;
				margin-right: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #1D2129;
				line-height: 44rpx;
			}

			.navbar-left__user-tag {
				display: inline-block;
				height: 28rpx;
				padding: 0 8rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				background-color: #86909C;
				border-radius: 200rpx;
			}
		}
	}
</style>